<style>
    #role-edit .menu-tree {
        min-height: 330px;
        overflow-y: hidden;
    }
</style>

<div class="febs-container febs-full" id="role-edit">
    <div class="febs-open-body">
        <form class="layui-form febs-full" action="" lay-filter="role-edit-form">
            <div class="layui-form-item febs-hide">
                <label class="layui-form-label febs-form-item-require">角色ID：</label>
                <div class="layui-input-block">
                    <input type="text" name="roleId" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item febs-hide">
                <label class="layui-form-label febs-form-item-require">公司ID：</label>
                <div class="layui-input-block">
                    <input type="text" name="tenantId" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-label-detail">公司名称：</label>
                <div class="layui-input-block layui-input-block-html" id="tenantName">
                </div>
            </div>

            <div class="layui-form-item" id="role-name">
                <label class="layui-form-label febs-form-item-require">角色名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="roleName" autocomplete="off" class="layui-input" minlength="2"
                           maxlength="10" lay-verify="range" placeholder="请输入角色名称">
                </div>
            </div>

            <div class="layui-form-item" id="role-type">
                <label class="layui-form-label febs-form-item-require">角色类型：</label>
                <div class="layui-input-block" lay-search="">
                    <select name="roleType" id="roleType">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色描述：</label>
                <div class="layui-input-block">
                    <textarea name="remark" maxlength="50" class="layui-textarea"
                              placeholder="请输入角色描述"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色权限：</label>
                <div class="layui-input-block menu-tree" style="margin-top: .8rem;"></div>
            </div>
            <div class="layui-form-item febs-hide">
                <button class="layui-btn" lay-submit="" lay-filter="role-edit-form-submit" id="submit"></button>
                <button type="reset" class="layui-btn" id="reset"></button>
            </div>
        </form>
    </div>
</div>

<script data-th-inline="javascript">
    layui.use(['jquery', 'febs', 'form', 'validate', 'treeSelect', 'eleTree'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            eleTree = layui.eleTree,
            form = layui.form,
            $view = $('#role-edit'),
            role = [[${role}]],
            validate = layui.validate,
            menuTree;

        initRoleType();

        let tenantId = null
        let tenantName = null
        if (role) {
            //如果 是编辑页面，则加载该角色对应公司下的菜单树
            tenantId = role.tenantId
            tenantName = role.tenantName
            menuTree = renderTree();
            //初始化编辑页面，给控件赋值
            initFormValue()
            // setTimeout(initFormValue, 100);
        } else {
            //如果 是新增页面，则加载管理员默认菜单树
            tenantId = POPUP_DATA.tenantId
            tenantName = POPUP_DATA.tenantName
            menuTree = renderTree();
            form.val("role-edit-form", {
                "tenantId": tenantId
            });
            $view.find("#tenantName").html(tenantName)
        }

        form.verify(validate);
        form.render();

        function renderTree() {
            //渲染树方法
            menuTree = eleTree.render({
                elem: '.menu-tree',
                url: ctx + 'role/tenantTree',
                where: {
                    "tenantId": tenantId,
                    "roleId": role==null?"":role.roleId,
                    "invalidate_ie_cache": new Date()
                },
                showCheckbox: true,
                accordion: false,
                checkStrictly: false,
                renderAfterExpand: false,
                request: {
                    name: "title",
                    key: "id",
                    children: "childs",
                    checked: "checked",
                    data: "data"
                },
                response: {
                    statusName: "code",
                    statusCode: 200,
                    dataName: "data"
                },
                //去除回调，只在页面加载时初始化一次
            });
            return menuTree;
        }

        hideTenantList();

        function hideTenantList() {
            var hasHeadCompanyRole = [[${hasHeadCompanyRole}]];
            if (!hasHeadCompanyRole) {
                $view.find('#role-name').removeClass("layui-col-sm6");
            }
            form.render('select');
        }

        function initFormValue() {
            if (role) {
                form.val("role-edit-form", {
                    "roleId": role.roleId,
                    "roleName": role.roleName,
                    "tenantId": role.tenantId,
                    "roleType": role.roleType,
                    "remark": role.remark
                });
            } else {
                form.val("role-edit-form", {
                    "tenantId": tenantId,
                    "tenantName": tenantName
                });
            }
            $view.find("#tenantName").html(role.tenantName)
        }

        form.on('submit(role-edit-form-submit)', function (data) {
            var selected = menuTree.getChecked(false, true);
            var menuIds = [];
            layui.each(selected, function (key, item) {
                menuIds.push(item.id)
            });
            data.field.menuIds = menuIds.join(',');
            if (!menuIds.length) {
                febs.modal.confirm('提示', '当前角色未授予任何权限，是否继续？', function () {
                    addOrUpdateRole(data.field);
                });
            } else {
                addOrUpdateRole(data.field);
            }
            return false;
        });

        function addOrUpdateRole(data) {
            //判断用户是否是总公司用户，给予默认utype
            var hasHeadCompanyRole = [[${hasHeadCompanyRole}]];
            if (hasHeadCompanyRole) {
                data.utype = '1'
            } else {
                data.utype = '2'
            }
            febs.modal.confirm('保存提示', '是否保存角色信息？', function () {
                if (data.roleId && data.roleId.length > 0) {
                    febs.post(ctx + 'role/update', data, function () {
                        layer.closeAll();
                        febs.alert.success('修改角色成功');
                        $('#febs-role').find('#query').trigger('click');
                    });
                } else {
                    febs.post(ctx + 'role', data, function () {
                        layer.closeAll();
                        febs.alert.success('新增角色成功');
                        $('#febs-role').find('#query').trigger('click');
                    });
                }
            });
        }

        function initRoleType() {
            //初始化奖品单位
            febs.getSync(ctx + 'dictItem/SYSTEM_ROLE_TYPE', null, function (r) {
                // console.log("违章" + JSON.stringify(r.data))
                var areaLis = r.data;
                var options = '';
                $.each(areaLis, function (index, item) {
                    options += '<option value="' + item.itemCode + '">' + item.itemName + '</option>'

                })
                $("#roleType").append(options);
            });
            form.render();
        }
    });
</script>
